<template>
  <!-- 发货填资料弹窗 -->
  <el-dialog
    class="pick-dialog"
    title="发货资料"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="860px"
    @close="close"
  >
    <div class="form-box">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :inline="true"
        label-width="auto"
        :rules="rules"
        class="demo-ruleForm"
      >
        <el-divider content-position="left">账号信息</el-divider>
        <el-form-item label="游戏账号:" prop="accountNumber">
          <el-input :disabled="from=='view'" type="text" v-model="ruleForm.accountNumber" />
        </el-form-item>
        <el-form-item label="游戏密码:" prop="accountPassword">
          <el-input :disabled="from=='view'" type="text" v-model="ruleForm.accountPassword" />
        </el-form-item>
        <el-form-item label="原手机号:" prop="oldTel">
          <el-input :disabled="from=='view'" type="text" v-model="ruleForm.oldTel" />
        </el-form-item>
        <el-form-item label="换绑后手机号:" prop="changeTel">
          <el-input :disabled="from=='view'" type="text" v-model="ruleForm.changeTel" />
        </el-form-item>
        <el-form-item label="备注:" prop="remark">
          <el-input :disabled="from=='view'" type="textarea" v-model="ruleForm.remark" />
        </el-form-item>
        <el-divider content-position="left">资料上传</el-divider>
        <!-- 钱包实名截图 游戏实名截图 换绑成功截图  账号违规记录截图  游戏违规记录截图 -->
        <el-form-item
          :label="'换绑截图：'"
          prop="huanbangtu"
        >
          <uploadImageOne v-model="ruleForm.huanbangtu" ></uploadImageOne>
          <!-- <el-upload
            :action="uploadImgUrl"
            list-type="picture-card"
            :file-list="imgShowList0"
            :on-preview="handlePictureCardPreview"
            :on-success="handleUploadSuccess0"
            :on-remove="handleRemove0"
            :disabled="from=='view'"
            :multiple="true"
          >
            <i class="el-icon-plus"></i>
          </el-upload> -->
        </el-form-item>
      </el-form>

      <div class="center" v-if="from!='view'">
        <el-button @click="close('ruleForm')">关闭</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          :loading="loading"
          >确认</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script>
import orderApi from "@/api/pickUp/order";
import { postUpload } from "@/api/upload";
export default {
  name: "",
  data() {
    return {
      loading: false,
      isShow: false,
      ruleForm: {
        saleOrderId: "",
        goodsId: "",
        accountNumber: "",
        accountPassword: "",
        oldTel: "",
        changeTel: "",
        profileImg: "",
        remark:'',
        huanbangtu:''
      },
      profileKeyList: [],
      rules: {
        accountNumber:[
          {required: true, message:'请输入', trigger: 'blur'}
        ],
        accountPassword:[
          {required: true, message:'请输入', trigger: 'blur'}
        ],
        oldTel:[
          {required: true, message:'请输入', trigger: 'blur'}
        ],
        changeTel:[
          {required: true, message:'请输入', trigger: 'blur'}
        ],
        huanbangtu:[
          {required: true, message:'请上传换绑截图', trigger: 'change'}
        ],
      },
      // 上传相关
      uploadImgUrl: "",
      imgShowList0: [],
      newImages0: [],
      imgFileList0: [],
      from:''
    };
  },
  created() {
    this.uploadImgUrl = process.env.VUE_APP_BASE_API + "/upload/image";
  },
  methods: {
    open(order, flag) {
      this.from = flag
      //console.log("%c Line:173 🌭 order", "color:#b03734", order);
      //console.log("%c Line:173 🍉 flag", "color:#fca650", flag);
      this.imgShowList0 = [];
      this.newImages0 = [];
      this.imgFileList0 = [];

      this.ruleForm.saleOrderId = order.id;
      this.ruleForm.goodsId = order.goodsId;
      this.ruleForm.accountNumber = order.realAccountNumber;
      this.ruleForm.accountPassword = "";
      this.ruleForm.oldTel = "";
      this.ruleForm.changeTel = order.changeTel;
      this.ruleForm.profileImg = "";
      this.ruleForm.id = "";
      this.ruleForm.huanbangtu = "";

      this.isShow = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          // 组装图片附件
          // 拼接新上传的图片
          let ziliao = [];
          if(this.ruleForm.huanbangtu){
            ziliao = [{
              name:'1',
              url:this.ruleForm.huanbangtu
            }]
          }
     
          this.ruleForm.profileImg = JSON.stringify(ziliao);
          if(this.from=='edit'){
            orderApi.editSaleOrderProfile(this.ruleForm).then((res) => {
              //console.log("%c Line:93 编辑发货 res", "color:#42b983", res);
              this.isShow = false;
              this.loading = false;
              if (res.code == 200) {
                this.$parent.getList();
              }
            });
          }else{
            orderApi.saleOrderProfile(this.ruleForm).then((res) => {
              //console.log("%c Line:93 发货 res", "color:#42b983", res);
              this.isShow = false;
              this.loading = false;
              if (res.code == 200) {
                this.$parent.getList();
              }
            });
          }
          
        } else {
          //console.log("error submit!!");
          return false;
        }
      });
    },
    // 上传图片相关
    // 图片预览
    handlePictureCardPreview(file) {
      this.$viewerApi({
        images: [file.url],
      });
    },
    uploadNumber(file, fileList) {
      //限制图片数量
      this.$modal.msgError("最多只能上传10张图片");
    },
    // 图片上传成功
    handleUploadSuccess0(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages0 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove0(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList0.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList0.splice(key, 1); //回显的图片
        }
      });
      this.newImages0.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages0.splice(key, 1); //新上传的图片
        }
      });
    },
    // 图片上传成功
    handleUploadSuccess1(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages1 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove1(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList1.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList1.splice(key, 1); //回显的图片
        }
      });
      this.newImages1.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages1.splice(key, 1); //新上传的图片
        }
      });
    },
    // 图片上传成功
    handleUploadSuccess2(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages2 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove2(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList2.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList2.splice(key, 1); //回显的图片
        }
      });
      this.newImages2.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages2.splice(key, 1); //新上传的图片
        }
      });
    },
    // 图片上传成功
    handleUploadSuccess3(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages3 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove3(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList3.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList3.splice(key, 1); //回显的图片
        }
      });
      this.newImages3.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages3.splice(key, 1); //新上传的图片
        }
      });
    },
    // 图片上传成功
    handleUploadSuccess4(res, file, fileList) {
      if (res.code == 200) {
        // 取得新上传的文件
        this.newImages4 = fileList.filter((t) => {
          return t.url.indexOf("blob:") > -1;
        });
      }
    },
    // 图片删除
    handleRemove4(response) {
      const that = this;
      // 1.获取将要删除图片的临时路径
      const filePath = response.url;
      // 2.找到图片对应的索引值
      this.imgFileList4.forEach(function (element, key) {
        if (element.url === filePath) {
          that.imgFileList4.splice(key, 1); //回显的图片
        }
      });
      this.newImages4.forEach(function (element, key) {
        if (element.url === filePath) {
          that.newImages4.splice(key, 1); //新上传的图片
        }
      });
    },
    // 压缩图片
    compressImage(file) {
      return new Promise((resolve, reject) => {
        new ImageCompressor(file.file, {
          quality: 0.6,
          checkOrientation: false,
          success(result) {
            resolve(result);
          },
          error(e) {
            reject();
          },
        });
      });
    },
    // 上传图片
    async uploadImgs(file) {
      // 获取压缩后的文件流
      let compreeBolb = await this.compressImage(file);
    
      const formData = new FormData();
      formData.append("file", compreeBolb); //压缩后的文件会自动转换成二进制文件流类型
      //上传图片到后台
      try {
        let uploadImg = await postUpload(formData);
        file.data = {
          filePath: uploadImg.msg,
        };
        file.code = 200;
        return file;
      } catch {
        file.code = 500;
        return file;
      }
    },

    close(formName) {
      this.isShow = false;
      this.$refs.ruleForm.resetFields()
    },
  },
};
</script>
<style scoped lang="scss">
.form-box {
  height: calc(100vh - 200px);
  overflow-y: auto;
}
.center {
  text-align: center;
}
</style>
